
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Image, TouchableOpacity} from 'react-native';
import {Util} from "../util";
import TwebView from '../twebView';
const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
    android:
        'Double tap R on your keyboard to reload,\n' +
        'Shake or press menu button for dev menu',
});

type Props = {};
export default class recommend extends Component<Props> {
    constructor(props){
        super(props);
        const {navigation,name,data} = props;
        this.state={
          navigation:navigation,
          name: name,
          data: data,
        };
    }
    render() {
        var data = this.state.data;
        var views1 = [];
        var views2 = [];
        for (var i in data){
            var view = (
                <TouchableOpacity style={styles.img_item} key={i} onPress={this._showWebPage.bind(this,data[i].url,data[i].title)}>
                    <Image style={[styles.img,styles.shadow]} source={{uri : data[i].img}} />
                    <Text style={styles.title} numberOfLines={2}>{data[i].title}</Text>
                </TouchableOpacity>
            );
            if (i < 4){
                views1.push(view);
            }else {
                views2.push(view);
            }
        }

        return (
            <View style={styles.container}>
                <View>
                    <Text style={[styles.text1,styles.title_top]}>{this.state.name}</Text>
                </View>
                <View style={styles.img_view}>
                    {views1}
                </View>
                <View style={styles.img_view}>
                    {views2}
                </View>
            </View>
        );
    }
    _showWebPage(url,title) {
        this.state.navigation.navigate('TwebView',{url: url, title: title});
    }
}

const styles = StyleSheet.create({
    img_view: {
        flexDirection: 'row',
    },
    container: {
        marginLeft: 10,
        marginRight: 10,
    },
    img_item:{
        height: 165,
        flex: 1,
    },
    shadow:{
      shadowOpacity: 1,
      shadowColor: '#ccc',
      shadowOffset:{width: 1*Util.pixel, height: Util.pixel}
    },
    img:{
        height:120,
        width: (Util.size.width - 40)/4,
    },
    text1:{
        color: '#5E5E5E',
        marginBottom: 8,
        fontSize: 16,
    },
    title_top:{
      marginTop: 10,
    },
    title:{
        marginTop: 4,
        fontSize: 14,
        color: '#818181'
    },
});